<template>
    <div>
        <div class="vs-table-box">
            <el-form v-search-box-enter v-loading="loading" ref="ruleForm" label-position="right" :rules="rules"
                class="orm-info" label-width="40px" :model="ruleForm">
                <el-form-item label="" prop="title">
                    <div class="flex ai-c">
                        <el-image style="width: 60px; height: 60px;border-radius:50%" :src="info.user.avatar"
                            v-if="info.user.avatar"> </el-image>
                        <span style="margin-left:20px">{{ info.user.nickname }}</span>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="tech_num">
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="反馈日期">{{ info.create_time }}</el-descriptions-item>
                        <el-descriptions-item label="反馈类型">{{ info.type == 1 ? '投诉' : '建议' }}</el-descriptions-item>
                        <el-descriptions-item label="反馈内容">{{ info.content }}</el-descriptions-item>
                        <el-descriptions-item label="上传凭证">
                            <el-image style="width: 100px; height: 100px;margin-right:10px" v-for="(it, i) in info.list"
                                :key="i" :src="info.list[i]" :preview-src-list="info.list">
                            </el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="回复状态">
                            <span>{{ info.reply_content ? '已回复' : '未回复' }}</span>
                            <el-button type="primary" size="mini" style="margin-left:20px" @click="setRow"
                                v-if="!info.reply_content">回复</el-button>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
                <el-form-item label="" prop="tech_num" v-if="info.reply_content">
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="回复人员">{{ info.reply.name }}</el-descriptions-item>
                        <el-descriptions-item label="回复时间">{{ info.reply_date }}</el-descriptions-item>
                        <el-descriptions-item label="回复内容">{{ info.reply_content }}</el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            info: {
                user: {},
                reply: {}
            }
        }
    },
    created() {
        let { id, type } = this.$route.query;
        if (id) {
            this.getRoom(id);
        }
    },
    methods: {
        async setRow() {
            this.$prompt('回复内容', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputErrorMessage: '请输入回复内容',
                inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                inputType: 'textarea'
            }).then(async ({ value }) => {
                let { code, data } = await this.$Http.replyFeedback({ id: this.info.id, reply_content: value });
                if (code) {
                    this.$message.success('回复成功！');
                    this.getRoom(this.info.id)
                }
            })
        },
        async getRoom(id) {
            this.loading = true;
            let { code, data } = await this.$Http.getFeedback({ id });
            this.loading = false;
            if (code) {
                this.info = data
                let arr = this.info.imgs.split(',')
                // this.info.lsit = arr
                this.$set(this.info, 'list', arr)
            }
        },
    }
}
</script>
<style lang="scss" scoped>

</style>